<!DOCTYPE html>
<html>
<head>
  <!-- Standard Meta -->
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

<link rel="image_src" type="image/jpeg" href="/images/logo.png" />

<!-- Site Properities -->
<meta name="generator" content="DocPad v6.79.4" />
<title>Theming | Semantic UI</title>

<meta name="description" content="An introduction to theming" />
<meta name="keywords" content="html5, ui, library, framework, javascript" />
  
  <script src="/javascript/library/detect.min.js"></script>
  <script src="/javascript/library/jquery.min.js"></script>
  <script src="/javascript/library/clipboard.min.js"></script>
  <script src="/javascript/library/cookie.min.js"></script>
  <script src="/javascript/library/easing.min.js"></script>
  <script src="/javascript/library/highlight.min.js"></script>
  <script src="/javascript/library/history.min.js"></script>
  <script src="/javascript/library/state.js"></script>
  <script src="/javascript/library/tablesort.min.js"></script>
  <script src="/javascript/library/underscore.min.js"></script>





<script src="/dist/semantic.min.js"></script>



<script src="/javascript/docs.js"></script>

  
<link rel="stylesheet" type="text/css" class="ui" href="/dist/semantic.min.css">




<link rel="stylesheet" type="text/css" href="/stylesheets/docs.css">
<link rel="stylesheet" type="text/css" href="/stylesheets/rtl.css">





  
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-44039803-2', 'auto');
  ga('send', 'pageview');
</script>

  
<script type="text/javascript">
  window.liveSettings = {
    api_key    : '9ede3015b9f84c1aabc81ab839c55d74',
    parse_attr : [
      'data-title',
      'data-content'
    ],
    detectlang   : false,
    autocollect  : true,
    ignore_tags  : ['i', 'code', 'pre'],
    parse_attr   : ['data-title', 'data-content', 'data-text'],
    ignore_class : ['code', 'anchor']
  };
</script>
<script type="text/javascript" src="//cdn.transifex.com/live.js"></script>


</head>
<body id="example" class="theming" ontouchstart="">
  
  <div class="ui vertical inverted sidebar menu" id="toc">
  








<div class="item">
  <a class="ui logo icon image" href="/">
    <img src="/images/logo.png">
  </a>
  <a href="/"><b>UI Docs</b></a>
</div>
<a class="item" href="/introduction/getting-started.html">
  <b>Getting Started</b>
</a>
<a class="item" href="/introduction/new.html">
  <b>New in 2.4</b>
</a>
<div class="item">
  <div class="header">Introduction</div>
  <div class="menu">
    
      <a class="item" href="/introduction/integrations.html">
        Integrations
      </a>
    
      <a class="item" href="/introduction/build-tools.html">
        Build Tools
      </a>
    
      <a class="item" href="/introduction/advanced-usage.html">
        Recipes
      </a>
    
      <a class="item" href="/introduction/glossary.html">
        Glossary
      </a>
    
  </div>
</div>
<div class="item">
  <div class="header">Usage</div>
  <div class="menu">
    
      <a class="active item" href="/usage/theming.html">
        Theming
      </a>
    
      <a class="item" href="/usage/layout.html">
        Layouts
      </a>
    
  </div>
</div>
<div class="item">
  <div class=" header">Globals</div>
  <div class="menu">
    
      <a class="item" href="/globals/reset.html">
        Reset
        
      </a>
    
      <a class="item" href="/globals/site.html">
        Site
        
      </a>
    
  </div>
</div>
<div class="item">
  <div class=" header">Elements</div>
  <div class="menu">
    
      <a class="item" href="/elements/button.html">
        Button
        
      </a>
    
      <a class="item" href="/elements/container.html">
        Container
        
      </a>
    
      <a class="item" href="/elements/divider.html">
        Divider
        
      </a>
    
      <a class="item" href="/elements/flag.html">
        Flag
        
      </a>
    
      <a class="item" href="/elements/header.html">
        Header
        
      </a>
    
      <a class="item" href="/elements/icon.html">
        Icon
        
      </a>
    
      <a class="item" href="/elements/image.html">
        Image
        
      </a>
    
      <a class="item" href="/elements/input.html">
        Input
        
      </a>
    
      <a class="item" href="/elements/label.html">
        Label
        
      </a>
    
      <a class="item" href="/elements/list.html">
        List
        
      </a>
    
      <a class="item" href="/elements/loader.html">
        Loader
        
      </a>
    
      <a class="item" href="/elements/placeholder.html">
        Placeholder
        
      </a>
    
      <a class="item" href="/elements/rail.html">
        Rail
        
      </a>
    
      <a class="item" href="/elements/reveal.html">
        Reveal
        
      </a>
    
      <a class="item" href="/elements/segment.html">
        Segment
        
      </a>
    
      <a class="item" href="/elements/step.html">
        Step
        
      </a>
    
  </div>
</div>
<div class="item">
  <div class=" header">Collections</div>
  <div class="menu">
    
      <a class="item" href="/collections/breadcrumb.html">
        Breadcrumb
        
      </a>
    
      <a class="item" href="/collections/form.html">
        Form
        
      </a>
    
      <a class="item" href="/collections/grid.html">
        Grid
        
      </a>
    
      <a class="item" href="/collections/menu.html">
        Menu
        
      </a>
    
      <a class="item" href="/collections/message.html">
        Message
        
      </a>
    
      <a class="item" href="/collections/table.html">
        Table
        
      </a>
    
  </div>
</div>
<div class="item">
  <div class=" header">Views</div>
  <div class="menu">
    
      <a class="item" href="/views/advertisement.html">
        Advertisement
        
      </a>
    
      <a class="item" href="/views/card.html">
        Card
        
      </a>
    
      <a class="item" href="/views/comment.html">
        Comment
        
      </a>
    
      <a class="item" href="/views/feed.html">
        Feed
        
      </a>
    
      <a class="item" href="/views/item.html">
        Item
        
      </a>
    
      <a class="item" href="/views/statistic.html">
        Statistic
        
      </a>
    
  </div>
</div>
<div class="item">
  <div class=" header">Modules</div>
  <div class="menu">
    
      <a class="item" href="/modules/accordion.html">
        Accordion
        
      </a>
  
      <a class="item" href="/modules/checkbox.html">
        Checkbox
        
      </a>
  
      <a class="item" href="/modules/dimmer.html">
        Dimmer
        
      </a>
  
      <a class="item" href="/modules/dropdown.html">
        Dropdown
        
      </a>
  
      <a class="item" href="/modules/embed.html">
        Embed
        
      </a>
  
      <a class="item" href="/modules/modal.html">
        Modal
        
      </a>
  
      <a class="item" href="/modules/popup.html">
        Popup
        
      </a>
  
      <a class="item" href="/modules/progress.html">
        Progress
        
      </a>
  
      <a class="item" href="/modules/rating.html">
        Rating
        
      </a>
  
      <a class="item" href="/modules/search.html">
        Search
        
      </a>
  
      <a class="item" href="/modules/shape.html">
        Shape
        
      </a>
  
      <a class="item" href="/modules/sidebar.html">
        Sidebar
        
      </a>
  
      <a class="item" href="/modules/sticky.html">
        Sticky
        
      </a>
  
      <a class="item" href="/modules/tab.html">
        Tab
        
      </a>
  
      <a class="item" href="/modules/transition.html">
        Transition
        
      </a>
  
  </div>
</div>
<div class="item">
  <div class=" header">Behaviors</div>
  <div class="menu">
    
      <a class="item" href="/behaviors/api.html">
        API
        
      </a>
    
      <a class="item" href="/behaviors/form.html">
        Form Validation
        
      </a>
    
      <a class="item" href="/behaviors/visibility.html">
        Visibility
        
      </a>
    
  </div>
</div>

</div>

<div class="ui black big launch right attached fixed button">
  <i class="content icon"></i>
  <span class="text">Menu</span>
</div>
  




<div class="ui fixed inverted main menu">
  <div class="ui container">
    <a class="launch icon item">
      <i class="content icon"></i>
    </a>
    
      <div class="item">
        Theming
      </div>
    
    <div class="right menu">
      
      <div class="vertically fitted borderless item">
        <iframe class="github" src="//ghbtns.com/github-btn.html?user=semantic-org&amp;repo=semantic-ui&amp;type=watch&amp;count=true" allowtransparency="true" frameborder="0" scrolling="0" width="100" height="20"></iframe>
      </div>
      
      <!--
      <div class="item">
        <div class="ui hidden right aligned search input" id="search">
          <div class="ui transparent icon input">
            <input class="prompt" type="text" placeholder="Search...">
            <i class="inverted search link icon" data-content="Search UI"></i>
          </div>
          <div class="results"></div>
        </div>
      </div>
      -->
    </div>
  </div>
</div>

  <div class="pusher">
    <div class="full height">
      <div class="toc">
        <div class="ui vertical inverted menu">
          








<div class="item">
  <a class="ui logo icon image" href="/">
    <img src="/images/logo.png">
  </a>
  <a href="/"><b>UI Docs</b></a>
</div>
<a class="item" href="/introduction/getting-started.html">
  <b>Getting Started</b>
</a>
<a class="item" href="/introduction/new.html">
  <b>New in 2.4</b>
</a>
<div class="item">
  <div class="header">Introduction</div>
  <div class="menu">
    
      <a class="item" href="/introduction/integrations.html">
        Integrations
      </a>
    
      <a class="item" href="/introduction/build-tools.html">
        Build Tools
      </a>
    
      <a class="item" href="/introduction/advanced-usage.html">
        Recipes
      </a>
    
      <a class="item" href="/introduction/glossary.html">
        Glossary
      </a>
    
  </div>
</div>
<div class="item">
  <div class="header">Usage</div>
  <div class="menu">
    
      <a class="active item" href="/usage/theming.html">
        Theming
      </a>
    
      <a class="item" href="/usage/layout.html">
        Layouts
      </a>
    
  </div>
</div>
<div class="item">
  <div class=" header">Globals</div>
  <div class="menu">
    
      <a class="item" href="/globals/reset.html">
        Reset
        
      </a>
    
      <a class="item" href="/globals/site.html">
        Site
        
      </a>
    
  </div>
</div>
<div class="item">
  <div class=" header">Elements</div>
  <div class="menu">
    
      <a class="item" href="/elements/button.html">
        Button
        
      </a>
    
      <a class="item" href="/elements/container.html">
        Container
        
      </a>
    
      <a class="item" href="/elements/divider.html">
        Divider
        
      </a>
    
      <a class="item" href="/elements/flag.html">
        Flag
        
      </a>
    
      <a class="item" href="/elements/header.html">
        Header
        
      </a>
    
      <a class="item" href="/elements/icon.html">
        Icon
        
      </a>
    
      <a class="item" href="/elements/image.html">
        Image
        
      </a>
    
      <a class="item" href="/elements/input.html">
        Input
        
      </a>
    
      <a class="item" href="/elements/label.html">
        Label
        
      </a>
    
      <a class="item" href="/elements/list.html">
        List
        
      </a>
    
      <a class="item" href="/elements/loader.html">
        Loader
        
      </a>
    
      <a class="item" href="/elements/placeholder.html">
        Placeholder
        
      </a>
    
      <a class="item" href="/elements/rail.html">
        Rail
        
      </a>
    
      <a class="item" href="/elements/reveal.html">
        Reveal
        
      </a>
    
      <a class="item" href="/elements/segment.html">
        Segment
        
      </a>
    
      <a class="item" href="/elements/step.html">
        Step
        
      </a>
    
  </div>
</div>
<div class="item">
  <div class=" header">Collections</div>
  <div class="menu">
    
      <a class="item" href="/collections/breadcrumb.html">
        Breadcrumb
        
      </a>
    
      <a class="item" href="/collections/form.html">
        Form
        
      </a>
    
      <a class="item" href="/collections/grid.html">
        Grid
        
      </a>
    
      <a class="item" href="/collections/menu.html">
        Menu
        
      </a>
    
      <a class="item" href="/collections/message.html">
        Message
        
      </a>
    
      <a class="item" href="/collections/table.html">
        Table
        
      </a>
    
  </div>
</div>
<div class="item">
  <div class=" header">Views</div>
  <div class="menu">
    
      <a class="item" href="/views/advertisement.html">
        Advertisement
        
      </a>
    
      <a class="item" href="/views/card.html">
        Card
        
      </a>
    
      <a class="item" href="/views/comment.html">
        Comment
        
      </a>
    
      <a class="item" href="/views/feed.html">
        Feed
        
      </a>
    
      <a class="item" href="/views/item.html">
        Item
        
      </a>
    
      <a class="item" href="/views/statistic.html">
        Statistic
        
      </a>
    
  </div>
</div>
<div class="item">
  <div class=" header">Modules</div>
  <div class="menu">
    
      <a class="item" href="/modules/accordion.html">
        Accordion
        
      </a>
  
      <a class="item" href="/modules/checkbox.html">
        Checkbox
        
      </a>
  
      <a class="item" href="/modules/dimmer.html">
        Dimmer
        
      </a>
  
      <a class="item" href="/modules/dropdown.html">
        Dropdown
        
      </a>
  
      <a class="item" href="/modules/embed.html">
        Embed
        
      </a>
  
      <a class="item" href="/modules/modal.html">
        Modal
        
      </a>
  
      <a class="item" href="/modules/popup.html">
        Popup
        
      </a>
  
      <a class="item" href="/modules/progress.html">
        Progress
        
      </a>
  
      <a class="item" href="/modules/rating.html">
        Rating
        
      </a>
  
      <a class="item" href="/modules/search.html">
        Search
        
      </a>
  
      <a class="item" href="/modules/shape.html">
        Shape
        
      </a>
  
      <a class="item" href="/modules/sidebar.html">
        Sidebar
        
      </a>
  
      <a class="item" href="/modules/sticky.html">
        Sticky
        
      </a>
  
      <a class="item" href="/modules/tab.html">
        Tab
        
      </a>
  
      <a class="item" href="/modules/transition.html">
        Transition
        
      </a>
  
  </div>
</div>
<div class="item">
  <div class=" header">Behaviors</div>
  <div class="menu">
    
      <a class="item" href="/behaviors/api.html">
        API
        
      </a>
    
      <a class="item" href="/behaviors/form.html">
        Form Validation
        
      </a>
    
      <a class="item" href="/behaviors/visibility.html">
        Visibility
        
      </a>
    
  </div>
</div>

        </div>
      </div>
      <div class="article">
        

<div class="ui masthead vertical segment">
  <div class="ui container">
    <div class="introduction">

      <h1 class="ui header">
        Theming
        
        <div class="sub header">
          
          <a class="twitter-share-button twitter"
            href="http://twitter.com/share"
            data-text="Semantic UI is a next generation UI framework"
            data-url="http://semantic-ui.com"
            data-via="semanticui">
          </a>
          <script type="text/javascript">
          window.twttr=(function(d,s,id){var t,js,fjs=d.getElementsByTagName(s)[0];if(d.getElementById(id)){return}js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);return window.twttr||(t={_e:[],ready:function(f){t._e.push(f)}})}(document,"script","twitter-wjs"));
          </script>
          <iframe class="github" src="//ghbtns.com/github-btn.html?user=semantic-org&amp;repo=semantic-ui&amp;type=watch&amp;count=true" allowtransparency="true" frameborder="0" scrolling="0" width="100" height="20"></iframe>
          
          An introduction to theming
        </div>
      </h1>

      <div class="ui hidden divider"></div>

      <div class="ui right floated main menu">
        <a class="bug popup icon item" data-content="Edit This Page" href="https://github.com/Semantic-Org/Semantic-UI-Docs/edit/master/server/documents/usage/theming.html.eco">
          <i class="edit icon"></i>
        </a>
        
        <a class="github popup icon item" data-content="View project on GitHub" href="https://github.com/Semantic-Org/Semantic-UI">
          <i class="alternate github icon"></i>
        </a>
      </div>
      <div class="ui right floated main menu">
        <a class="music popup icon item" data-content="Play Music">
          <i class="music icon"></i>
        </a>
        <div class="ui language dropdown right floating icon item" id="languages" data-content="Select Language">
          <i class="world icon"></i>
          <div class="menu">
            <div class="header">Select Language</div>
            <div class="ui icon search input">
              <i class="search icon"></i>
              <input type="text" placeholder="Search languages...">
            </div>
            <div class="scrolling menu">
  <div class="item" data-percent="100" data-value="en" data-english="English">
    <span class="description">English</span>
    English
  </div>
  <div class="item" data-percent="94" data-value="da" data-english="Danish">
    <span class="description">dansk</span>
    Danish
  </div>
  <div class="item" data-percent="94" data-value="es" data-english="Spanish">
    <span class="description">Español</span>
    Spanish
  </div>
  <div class="item" data-percent="34" data-value="zh" data-english="Chinese">
    <span class="description">简体中文</span>
    Chinese
  </div>
  <div class="item" data-percent="54" data-value="zh_TW" data-english="Chinese (Taiwan)">
    <span class="description">中文 (臺灣)</span>
    Chinese (Taiwan)
  </div>
  <div class="item" data-percent="79" data-value="fa" data-english="Persian">
    <span class="description">پارسی</span>
    Persian
  </div>
  <div class="item" data-percent="41" data-value="fr" data-english="French">
    <span class="description">Français</span>
    French
  </div>
  <div class="item" data-percent="37" data-value="el" data-english="Greek">
    <span class="description">ελληνικά</span>
    Greek
  </div>
  <div class="item" data-percent="37" data-value="ru" data-english="Russian">
    <span class="description">Русский</span>
    Russian
  </div>
  <div class="item" data-percent="36" data-value="de" data-english="German">
    <span class="description">Deutsch</span>
    German
  </div>
  <div class="item" data-percent="23" data-value="it" data-english="Italian">
    <span class="description">Italiano</span>
    Italian
  </div>
  <div class="item" data-percent="21" data-value="nl" data-english="Dutch">
    <span class="description">Nederlands</span>
    Dutch
  </div>
  <div class="item" data-percent="19" data-value="pt_BR" data-english="Portuguese">
    <span class="description">Português(BR)</span>
    Portuguese
  </div>
  <div class="item" data-percent="17" data-value="id" data-english="Indonesian">
    <span class="description">Indonesian</span>
    Indonesian
  </div>
  <div class="item" data-percent="12" data-value="lt" data-english="Lithuanian">
    <span class="description">Lietuvių</span>
    Lithuanian
  </div>
  <div class="item" data-percent="11" data-value="tr" data-english="Turkish">
    <span class="description">Türkçe</span>
    Turkish
  </div>
  <div class="item" data-percent="10" data-value="kr" data-english="Korean">
    <span class="description">한국어</span>
    Korean
  </div>
  <div class="item" data-percent="7"  data-value="ar" data-english="Arabic">
    <span class="description">العربية</span>
    Arabic
  </div>
  <div class="item" data-percent="6"  data-value="hu" data-english="Hungarian">
    <span class="description">Magyar</span>
    Hungarian
  </div>
  <div class="item" data-percent="6"  data-value="vi" data-english="Vietnamese">
    <span class="description">tiếng Việt</span>
    Vietnamese
  </div>
  <div class="item" data-percent="5"  data-value="sv" data-english="Swedish">
    <span class="description">svenska</span>
    Swedish
  </div>
  <div class="item" data-precent="4"  data-value="pl" data-english="Polish">
    <span class="description">polski</span>
    Polish
  </div>
  <div class="item" data-percent="6"  data-value="ja" data-english="Japanese">
    <span class="description">日本語</span>
    Japanese
  </div>
  <div class="item" data-percent="0"  data-value="ro" data-english="Romanian">
    <span class="description">românește</span>
    Romanian
  </div>
</div>

          </div>
        </div>
      </div>

      
      
      
    </div>
    <div class="advertisement">
      
      <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=semanticuicom" id="_carbonads_js"></script>
      
    </div>
    
  </div>
</div>

  <script src="//m.servedby-buysellads.com/monetization.js" type="text/javascript"></script>
  <div class="bsa-cpc"></div>
  <script>
    (function(){
      if(typeof _bsa !== 'undefined' && _bsa) {
      _bsa.init('default', 'CVAIKK7I', 'placement:semanticuicom', {
        target: '.bsa-cpc',
        align: 'horizontal',
        disable_css: 'true'
      });
        }
    })();
  </script>
  <div class="ui vertical beg transition hidden segment">
    <i class="large red delete link icon"></i>
    <div class="ui red header">
      <i class="disabled warning sign icon"></i>
      <div class="content">
        Want to Support Open Source? Whitelist Your Ad-Blocker.
        <div class="sub header">
          We promise to not show more than one small ad per page. Dont worry, hiding this message will make sure you won't get nagged again.
        </div>
      </div>
    </div>
  </div>



<script src="/javascript/theming.js"></script>

<link rel="stylesheet/less" type="text/css" href="/src/definitions/globals/site.less" />
<link rel="stylesheet/less" type="text/css" href="/src/definitions/elements/button.less" />
<link rel="stylesheet/less" type="text/css" href="/src/definitions/modules/checkbox.less" />

<div class="main ui intro container">

  <h2 class="ui dividing header">
    Preface
  </h2>

  <div class="no example">
    <h4>Progressive Truthfulness</h4>
    <blockquote>
      <p>[Progressive truthfulness] is perhaps a better way to build models of physical objects...Start with a model that is fully detailed but only resembles what is wanted. Then, one adjusts one attribute after another, bringing the result ever closer to the mental vision of the new creation, or to the real properties of a real-world object</p>
      <p>...Starting with exemplars that themselves have consistency of style ensures that such consistency is the designer's to lose.</p>
      <span class="author">Frederick Brooks - <a href="http://www.amazon.com/gp/product/0201362988/ref=as_li_tl?ie=UTF8&camp=1789&creative=9325&creativeASIN=0201362988&linkCode=as2&tag=seui-20&linkId=IUAKN3YQ7NNJ6IQ2" target="_blank">The Design of Design</a><span>
    </blockquote>
    <p>Components in Semantic UI are designed to help developers adhere to <a href="https://books.google.com/books?id=0qG4TQi-e-4C&pg=PT234&lpg=PT234&dq=%22progressive+truthfulness%22+frederick+brooks&source=bl&ots=yrjNc6wnz8&sig=PJoYODuRku2A1kBoFOPfn4iGYnc&hl=en&sa=X&ved=0CCIQ6AEwAGoVChMImdSMpIOVxgIVCx-sCh3EQgBu#v=onepage&q=%22progressive%20truthfulness%22%20frederick%20brooks&f=false" target="_blank">progressive truthfulness</a> in their development.</p>
    <p>Instead of having to create components from a blank canvas, developers using Semantic UI only need to specify how their components should differ from the default theme using <a href="http://lesscss.org/features/#variables-feature" target="_blank">CSS variables</a>.</p>
    <p>For developers who don't have time to hone a specific look-and-feel the default theme is elegant and neutral with a legible, open source sans-serif font <a href="http://www.latofonts.com"><code>Lato</code></a>.</p>

  </div>


  <h2 class="ui dividing header">
    Lead By Example
  </h2>
  <div class="no example">
    <h4>Recreating GitHub</h4>
    <p>Semantic UI includes an <a target="_blank" href="http://semantic-org.github.io/example-github/">example project</a> designed to showcase theming. This project includes examples of creating a packaged theme, using component CSS overrides, and managing your themes with <code>theme.config</code>.</p>

    <p>To get started click <b>the paint can</b> icon next to the notification button in the top right</p>

    <p>The example project includes two HTML files, <code>index.html</code> is designed to swap themes using a sidebar, and uses precompiled CSS. <code>static.html</code> uses files outputted by Semantic UI and can be used alongside our <a href="/introduction/build-tools.html">gulp pipeline</a> to try modifying themes hands on.</p>

    <p>Some special things to note:</p>

    <div class="ui large bulleted list">
      <div class="item"><a target="_blank" href="https://github.com/Semantic-Org/example-github/blob/master/semantic/src/themes/github/globals/site.variables">Using site.variables</a> to modify page container sizes, default fonts, and colors</div>
      <div class="item"><a target="_blank" href="https://github.com/Semantic-Org/example-github/blob/master/semantic/src/themes/github/collections/menu.overrides">Using overrides</a> with variables to add GitHub's specially formatted tab style</div>
      <div class="item">Combining multiple individual component themes together in one <a target="_blank" href="https://github.com/Semantic-Org/example-github/blob/master/semantic/src/theme.config">theme.config</a></div>
      <div class="item">Using a <a target="_blank" href="https://github.com/Semantic-Org/example-github/blob/master/semantic/src/themes/github/elements/icon.overrides">custom icon font</a>, and <a target="_blank" href="https://github.com/Semantic-Org/example-github/blob/master/semantic/src/themes/github/elements/icon.variables">modifying paths</a> to assets.</div>
    </div>
    <a target="_blank" href="http://semantic-org.github.io/example-github/" class="ui primary right labeled icon button">
      <i class="external link icon"></i>
      View Theming Demo
    </a>
  </div>

  <h2 class="ui dividing header">
    Using Themes
  </h2>
  <div class="no example">
    <h4>Sitewide Defaults</h4>

    <p>Semantic UI includes twelve named colors. Components with color variations inherit these global variables when defining how colors should appear.</p>

    <p>Each <a href="#theme-inheritance">level of inheritance</a> includes a special file <code>site.variables</code> which defines theme-wide defaults that each component can extend.</p>

    <p>Global variables use higher level abstractions, to avoid tedium in having to modify multiple properties to change the appearance of an element.</p>
    <p>Other button shades like those used in <code>hover</code>, <code>active</code> and <code>focus</code> states are created by modifying the saturation and lightness of color variables, these derived variables will automatically adjust to your new color palette.</a>

    <div class="ui ignored code" data-type="less" data-less="true" data-title="site/globals/site.variables">
    @primaryColor   : @pink;
    @secondaryColor : @grey;
    @red            : #B03060;
    @orange         : #FE9A76;
    @yellow         : #FFD700;
    @olive          : #32CD32;
    @green          : #016936;
    @teal           : #008080;
    @blue           : #0E6EB8;
    @violet         : #EE82EE;
    @purple         : #B413EC;
    @pink           : #FF1493;
    @brown          : #A52A2A;
    @grey           : #A0A0A0;
    @black          : #000000;
    </div>

    <button class="ui primary button">
      Primary Button
    </button>
    <button class="ui secondary button">
      Secondary Button
    </button>
    <div class="ui horizontal divider">All Colors</div>
    <button class="ui red button">Red</button>
    <button class="ui orange button">Orange</button>
    <button class="ui yellow button">Yellow</button>
    <button class="ui olive button">Olive</button>
    <button class="ui green button">Green</button>
    <button class="ui teal button">Teal</button>
    <button class="ui blue button">Blue</button>
    <button class="ui violet button">Violet</button>
    <button class="ui purple button">Purple</button>
    <button class="ui pink button">Pink</button>
    <button class="ui brown button">Brown</button>
    <button class="ui grey button">Grey</button>
    <button class="ui black button">Black</button>
  </div>
  <div class="no example">
    <h4>Component Defaults</h4>
    <p>Components inherit default values from <code>site.variables</code> which they may redefine specifically for their component</p>
    <p>For example, you could decide that instead of the boring default grey checkboxes, you want yours to include your site's branded colors. This can be accomplished in just a few variables.</p>
    <div class="ui ignored code" data-type="less" data-less="true" data-title="site/modules/checkbox.variables">
      /* Checkbox */
      @checkboxActiveBackground: @primaryColor;
      @checkboxActiveBorderColor: @primaryColor;
      @checkboxActiveCheckColor: @white;
      /* Focused Checkbox */
      @checkboxActiveFocusBackground: @primaryColorFocus;
      @checkboxActiveFocusBorderColor: @primaryColorFocus;
      @checkboxActiveFocusCheckColor: @white;
      @checkboxTransition: none;
      /* Radio */
      @radioActiveBackground: @white;
      @radioActiveBorderColor: @primaryColor;
      @radioActiveBulletColor: @primaryColor;
      /* Focused Radio */
      @radioActiveFocusBackground: @white;
      @radioActiveFocusBorderColor: @primaryColorFocus;
      @radioActiveFocusBulletColor: @primaryColorFocus;
      /* Slider */
      @sliderOnLineColor: @primaryColor;
      /* Focused Slider */
      @sliderOnFocusLineColor: @primaryColorFocus;
    </div>
    <div class="ui checkbox">
      <input type="checkbox" name="checkbox" checked >
      <label>Checkbox</label>
    </div>

    <div class="ui hidden divider"></div>
    <div class="ui form">
      <div class="inline fields">
        <div class="field">
          <div class="ui radio checkbox">
            <input type="radio" name="radio" checked />
            <label>A</label>
          </div>
        </div>
        <div class="field">
          <div class="ui radio checkbox">
            <input type="radio" name="radio" />
            <label>B</label>
          </div>
        </div>
        <div class="field">
          <div class="ui radio checkbox">
            <input type="radio" name="radio" />
            <label>C</label>
          </div>
        </div>
        <div class="field">
          <div class="ui radio checkbox">
            <input type="radio" name="radio" />
            <label>D</label>
          </div>
        </div>
      </div>
    </div>

    <div class="ui hidden divider"></div>
    <div class="ui slider checkbox">
      <input type="checkbox" name="slider" checked>
      <label>Slider</label>
    </div>
  </div>
  <div class="no example">
    <h4>Using Packaged Themes</h4>
    <p>When you download Semantic UI all components will be set up to use the default theme. Semantic uses a special file <code>theme.config</code> for controlling your project's packaged theming configuration.</p>
    <p>Packaged themes are applied per component, and not globally. This means you can specify individual themes for each component, mixing and matching from available themes.</p>
    <p>The default <code>theme.config</code> will have all component values set to default. To choose a theme, simply change a component to match the theme name.</p>

    <p>For example: </p>
    <div class="code" data-title="src/theme.config">
    /*******************************
            Theme Selection
    *******************************/

    /* Global */
    @site       : 'material';  /* Loads material site defaults */
    @reset      : 'default';

    /* Elements */
    @button     : 'github'; /* But uses them with GitHub Buttons */
    @container  : 'default';
    @divider    : 'default';
    @flag       : 'default';
    @header     : 'default';
    @icon       : 'default';
    @image      : 'default';
    @input      : 'default';
    @label      : 'default';
    @list       : 'default';
    @loader     : 'default';
    @rail       : 'default';
    @reveal     : 'default';
    @segment    : 'default';
    @step       : 'default';

    /* Collections */
    @breadcrumb : 'default';
    @form       : 'default';
    @grid       : 'default';
    @menu       : 'chubby'; /* Other UI can use different themes as well */
    @message    : 'default';
    @table      : 'default';

    /* Modules */
    @accordion  : 'default';
    @checkbox   : 'default';
    @dimmer     : 'default';
    @dropdown   : 'default';
    @embed      : 'default';
    @modal      : 'default';
    @nag        : 'default';
    @popup      : 'default';
    @progress   : 'default';
    @rating     : 'default';
    @search     : 'default';
    @shape      : 'default';
    @sidebar    : 'default';
    @sticky     : 'default';
    @tab        : 'default';
    @transition : 'default';

    /* Views */
    @ad         : 'default';
    @card       : 'default';
    @comment    : 'default';
    @feed       : 'default';
    @item       : 'default';
    @statistic  : 'default';
    </div>
  </div>

  <div class="no example">
    <h4>Browsing for Themes</h4>
    <p>Each UI definitions include a dropdown at the top of the page to preview themes included with the project.</p>
    <p>Themes are <b>per component</b>, so although, for example, material themes are available for <a href="/collections/menu.html">menu</a>, <a href="/elements/button.html">button</a>, and <a href="/globals/site.html">site</a>, changing all values to "material" will produce an error for components which are not included in that theme.</p>
  </div>

  <h2 class="ui dividing header">
    Composing a Component
  </h2>


  <div class="no example">
    <h4 class="ui header">Definition File</h4>
    <p>Each component includes a source CSS and Javascript file which declares how a components variables should affect its display on screen. Definition files are updated with each new release of Semantic UI, which may also include new variables.</p>
    <p>Navigating definition files are a great way for developers who are comfortable with CSS to get an idea of how themes affect a components display.</p>

    <p>Here's an abridged version of <a href="/elements/button.html">button</a> with an explanation of each section of the file.</p>

    <div class="code" data-type="less" data-title="src/definitions/elements/button.less">

/*******************************
                Theme
*******************************/

/* Define type and element to help locate theme files */
@type    : 'element';
@element : 'button';

/* Processes Variable Inheritance */
@import (multiple) '../../theme.config';

/* Create scope */
& {

/*******************************
               Button
*******************************/

/* Define Component */
.ui.button {
  cursor: pointer;
  display: inline-block;

  min-height: 1em;

  outline: none;
  border: none;
  vertical-align: @verticalAlign;
  background: @background;
  color: @textColor;

  font-family: @fontFamily;

  margin: 0em @horizontalMargin @verticalMargin 0em;
  padding: @verticalPadding @horizontalPadding (@verticalPadding + @shadowOffset);

  text-transform: @textTransform;
  text-shadow: @textShadow;
  font-weight: @fontWeight;
  line-height: @lineHeight;
  font-style: normal;
  text-align: center;
  text-decoration: none;

  border-radius: @borderRadius;
  box-shadow: @boxShadow;

  user-select: none;
  transition: @transition;
  will-change: @willChange;

  -webkit-tap-highlight-color: @tapColor;
}

/* Additional CSS removed for brevity */

/* Load CSS Overrides and Inline */
.loadUIOverrides();

}

    </div>
  </div>

  <div class="no example">
    <h4 class="ui header">Theme Files</h4>
    <p>Themes are made up of two files: a <code>.variables</code> file and a <code>.overrides</code> file. A theme can include both variables and overrides, or just either one alone.</p>
  </div>
  <div class="no example">
    <h4 class="ui header">Variables Files</h4>
    <p>A <code>.variables</code> file specifies variables which should be adjusted for a theme.</p>
    <p>A theme's variable file only needs to include variables which are different for a theme.</p>
  </div>
  <div class="no example">
    <h4 class="ui header">Override Files</h4>
    <p>An .overrides file specifies additional CSS rules to be added to a definition for a theme. This file also has access to all inherited variables for a component.</p>
  </div>

  <h2 class="ui dividing header">
    Cascading Inheritance
  </h2>

  <div class="no example">
    <h4 class="ui header">Theme Inheritance</h4>
    <p>Themes contain three separate levels of variable inheritance.</p>
    <p>Each level of inheritance corresponds to a different level of permanence for a variable.</p>
    <div class="ui fluid steps">
      <div class="step">
        <i class="lock icon"></i>
        <div class="content">
          <div class="title">Defaults</div>
          <div class="description">UI Defaults</div>
        </div>
      </div>
      <div class="step">
        <i class="download icon"></i>
        <div class="content">
          <div class="title">Packaged Theme</div>
          <div class="description">Distributable Packages</div>
        </div>
      </div>
    <div class="step">
        <i class="user icon"></i>
        <div class="content">
          <div class="title">Site Theme</div>
          <div class="description">Site Specific Changes</div>
        </div>
      </div>
    </div>
  </div>

  <div class="no example">
    <h4 class="ui header">Default Theme</h4>
    <div class="ui breadcrumb">
      <div class="section">
        <i class="disabled folder icon"></i>
        src
      </div>
      <i class="right chevron icon divider"></i>
      <div class="section">
        <i class="disabled folder icon"></i>
        themes
      </div>
      <i class="right chevron icon divider"></i>
      <div class="active section">
        <i class="inverted circular teal folder icon"></i>
        default
      </div>
    </div>
    <p>The default theme provides baseline variables for a component.</p>
    <p>The best way to understand what variables are available for inclusion in a theme is to examine a component's default <code>.variables</code> file.</p>
  </div>

  <div class="no example">
    <h4 class="ui header">Packaged Theme</h4>
    <div class="ui breadcrumb">
      <div class="section">
        <i class="disabled folder icon"></i>
        src
      </div>
      <i class="right chevron icon divider"></i>
      <div class="section">
        <i class="disabled folder icon"></i>
        themes
      </div>
      <i class="right chevron icon divider"></i>
      <div class="active section">
        <i class="inverted circular teal folder icon"></i>
        theme-name
      </div>
    </div>
    <p>Packaged themes are themes bundled together in a folder for distribution. These can be downloaded from the internet, or carried between projects.</p>
    <p>Packaged themes can be used by modifying values in your <a href="#using-packaged-themes">theme.config</a> file.</p>
  </div>

  <div class="no example">
    <h4 class="ui header">Site Theme</h4>
    <div class="ui breadcrumb">
      <div class="section">
        <i class="disabled folder icon"></i>
        src
      </div>
      <i class="right chevron icon divider"></i>
      <div class="active section">
        <i class="inverted circular teal folder icon"></i>
        site
      </div>
    </div>
    <p>A site theme, not to be mistaken with <code>site.variables</code> a file located in every theme, is a special user theme that can be loaded on top of all other themes.</p>
    <p>This is the best location to store changes that will be used on a single site. A site theme can be thought of as similar to a <a href="https://codex.wordpress.org/Child_Themes" target="_blank">child theme</a> in Wordpress.</p>
    <p>Site theme files <b>are optional includes</b> and can be safely removed if you do not need to add additional changes to a component on your project.</p>
  </div>
</div>
        <div class="ui  vertical footer segment">
  <div class="ui center aligned container">
    <div class="ui stackable grid">
      <div class="three wide column">
        <h4 class="ui header">Community</h4>
        <div class="ui link list">
          <a class="item" href="https://www.transifex.com/organization/semantic-org/" target="_blank">Help Translate</a>
          <a class="item" href="https://github.com/Semantic-Org/Semantic-UI/issues" target="_blank">Submit an Issue</a>
          <a class="item" href="https://gitter.im/Semantic-Org/Semantic-UI" target="_blank">Join our Chat</a>
          <a class="item" href="/cla.html" target="_blank">CLA</a>
        </div>
      </div>
      <div class="three wide column">
        <h4 class="ui header">Network</h4>
        <div class="ui link list">
          <a class="item" href="https://github.com/Semantic-Org/Semantic-UI" target="_blank">GitHub Repo</a>
          <a class="item" href="http://forums.semantic-ui.com" target="_blank">User Forums</a>
          <a class="item" href="http://1.semantic-ui.com">1.x Docs</a>
          <a class="item" href="http://legacy.semantic-ui.com">0.x Docs</a>
        </div>
      </div>
      <div class="seven wide right floated column">
        <h4 class="ui header">Help Preserve This Project</h4>
        <p> Support for the continued development of Semantic UI comes directly from the community.</p>
        <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
          <input type="hidden" name="cmd" value="_s-xclick">
          <input type="hidden" name="hosted_button_id" value="7ZAF2Q8DBZAQL">
          <button type="submit" class="ui large teal button">Donate Today</button>
        </form>
      </div>
    </div>
    <div class="ui section divider"></div>
    <img src="/images/logo.png" class="ui centered mini image">
    <div class="ui horizontal small divided link list">
      <a class="item" href="http://semantic-ui.mit-license.org/" target="_blank">Free & Open Source (MIT)</a>
    </div>
  </div>
</div>

      </div>
    </div>
  </div>
  <div class="ui basic language modal">
  <i class="close icon"></i>
  <div class="header">The <span class="name"></span> Translation Needs Your Help</div>
  <div class="image content">
    <div class="middle aligned image">
      <i class="world icon"></i>
    </div>
    <div class="description">
      <p>This translation is only <b><span class="complete"></span>%</b> complete!</p>
      <div class="ui inverted indicating progress">
        <div class="bar"></div>
      </div>
      <p>We need your help to make Semantic available to  people who speak your language.</p>
      <p>Our translation tools are easy to use and allow you to translate text without having to leave the site.
      </p>
    </div>
  </div>
  <div class="actions">
    <div class="ui inverted cancel button">No Thanks</div>
    <a href="https://github.com/Semantic-Org/Semantic-UI/wiki/Translating-Semantic-UI-Docs" target="_blank" class="ui inverted approve teal button">
      <i class="mail icon"></i>
      Help Translate
    </a>
  </div>
</div>

<div class="ui basic chinese modal">
  <i class="close icon"></i>
  <div class="header">Would you like to visit the mirror site?</div>
  <div class="image content">
    <div class="middle aligned image">
      <i class="question icon"></i>
    </div>
    <div class="description">
      <p>Semantic is available at <a href="http://www.semantic-ui.cn">semantic-ui.cn</a> a mirror site hosted inside China. This should make browsing much faster for those visiting from mainland China.
      </p>
    </div>
  </div>
  <div class="actions">
    <div class="ui inverted red cancel button">No Thanks</div>
    <a href="http://www.semantic-ui.cn" class="ui inverted green approve button">
      <i class="mail icon"></i>
      Yes, take me to the mirror
    </a>
  </div>
</div>
  <div class="ui demo page dimmer">
  <div class="content">
    <div class="center">
      <h2 class="ui inverted icon header">
        <i class="mail icon"></i>
        Dimmer Message
        <div class="sub header">Dimmer sub-header</div>
      </h2>
    </div>
  </div>
</div>
  <script>
window.less = {
  async        : true,
  environment  : 'production',
  fileAsync    : false,
  onReady      : false,
  useFileCache : true
};
</script>

<script src="/javascript/library/less.min.js"></script>


</body>
</html>
